<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FFmpeg 加载测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .log {
            background: #f5f5f5;
            padding: 10px;
            border-radius: 4px;
            margin: 10px 0;
            font-family: monospace;
            white-space: pre-wrap;
            max-height: 300px;
            overflow-y: auto;
        }
        button {
            padding: 10px 20px;
            margin: 5px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .btn-primary { background: #007bff; color: white; }
        .btn-success { background: #28a745; color: white; }
        .btn-danger { background: #dc3545; color: white; }
        .status {
            padding: 10px;
            margin: 10px 0;
            border-radius: 4px;
            font-weight: bold;
        }
        .status.loading { background: #fff3cd; color: #856404; }
        .status.success { background: #d4edda; color: #155724; }
        .status.error { background: #f8d7da; color: #721c24; }
    </style>
</head>
<body>
    <h1>FFmpeg 加载测试</h1>
    
    <div class="status loading" id="status">正在检查...</div>
    
    <div>
        <button class="btn-primary" onclick="testFFmpegLoad()">测试 FFmpeg 加载</button>
        <button class="btn-success" onclick="testFileSelect()" id="fileBtn" disabled>测试文件选择</button>
        <button class="btn-danger" onclick="clearLog()">清空日志</button>
    </div>
    
    <input type="file" id="fileInput" accept="video/*" style="display: none;">
    
    <div class="log" id="log"></div>

    <!-- FFmpeg.wasm 库 -->
    <script src="https://unpkg.com/@ffmpeg/ffmpeg@0.10.1/dist/ffmpeg.min.js"></script>
    
    <script>
        let ffmpeg = null;
        
        function log(message) {
            const logEl = document.getElementById('log');
            const timestamp = new Date().toLocaleTimeString();
            logEl.textContent += `[${timestamp}] ${message}\n`;
            logEl.scrollTop = logEl.scrollHeight;
            console.log(message);
        }
        
        function updateStatus(message, type = 'loading') {
            const statusEl = document.getElementById('status');
            statusEl.textContent = message;
            statusEl.className = `status ${type}`;
        }
        
        function clearLog() {
            document.getElementById('log').textContent = '';
        }
        
        async function testFFmpegLoad() {
            try {
                log('开始测试 FFmpeg 加载...');
                updateStatus('正在加载 FFmpeg...', 'loading');
                
                // 检查 FFmpeg 库是否已加载
                if (typeof FFmpeg === 'undefined') {
                    log('错误: FFmpeg 库未加载');
                    updateStatus('FFmpeg 库未加载', 'error');
                    return;
                }
                
                log('FFmpeg 库已加载，创建实例...');
                
                ffmpeg = FFmpeg.createFFmpeg({
                    log: true,
                    corePath: 'https://unpkg.com/@ffmpeg/core@0.10.0/dist/ffmpeg-core.js'
                });
                
                ffmpeg.setLogger(({ message }) => {
                    log(`FFmpeg: ${message}`);
                });
                
                log('开始加载 FFmpeg 核心...');
                updateStatus('正在下载 FFmpeg 核心...', 'loading');
                
                await ffmpeg.load();
                
                log('FFmpeg 加载完成！');
                updateStatus('FFmpeg 已就绪', 'success');
                
                // 启用文件选择按钮
                document.getElementById('fileBtn').disabled = false;
                
            } catch (error) {
                log(`FFmpeg 加载失败: ${error.message}`);
                updateStatus(`加载失败: ${error.message}`, 'error');
                console.error('FFmpeg 加载失败:', error);
            }
        }
        
        function testFileSelect() {
            const fileInput = document.getElementById('fileInput');
            fileInput.click();
        }
        
        document.getElementById('fileInput').addEventListener('change', (e) => {
            if (e.target.files.length > 0) {
                const file = e.target.files[0];
                log(`文件已选择: ${file.name} (${file.size} bytes, ${file.type})`);
                
                if (file.type.startsWith('video/')) {
                    log('✅ 这是一个视频文件');
                } else {
                    log('❌ 这不是视频文件');
                }
            }
        });
        
        // 页面加载完成后自动检查
        window.addEventListener('load', () => {
            log('页面加载完成');
            
            if (typeof FFmpeg === 'undefined') {
                log('❌ FFmpeg 库未加载');
                updateStatus('FFmpeg 库加载失败', 'error');
            } else {
                log('✅ FFmpeg 库已加载');
                updateStatus('FFmpeg 库已加载，点击测试按钮继续', 'success');
            }
        });
        
        // 错误处理
        window.addEventListener('error', (event) => {
            log(`全局错误: ${event.error?.message || event.message}`);
            console.error('全局错误:', event.error);
        });
        
        window.addEventListener('unhandledrejection', (event) => {
            log(`未处理的 Promise 拒绝: ${event.reason}`);
            console.error('未处理的 Promise 拒绝:', event.reason);
        });
    </script>
</body>
</html>